{% extends "base/base.html" %}
{% block body %} 
<div>
	<div style="float:left;width:25%" class='tool'>
		<div class='config_toolbar'>
			<div class='my_title'>模块配置</div>
			<div>
				<button onclick='addBtn1()'>添加图片+文字</button>
			</div>
			<div>
				<button onclick='addBtn2()'>添加图片列表</button>
			</div>
			<div>
				<button onclick='addBtn3()'>添加链接列表</button>
			</div>
			<div>
				<button onclick='addBtn4()'>添加文本</button>
			</div>
		</div>
		<div class='config_common'>
			<div class='my_title'>通用设置</div>
			<div>宽度<input name='width' class='mod'></input></div>
			<div>高度<input name='height' class='mod'></input></div>
		</div>
		<div class='config_common'>
			<div class='my_title'>样式配置</div>
			<div class='config_css'>
		</div>	
		<div class='config_btn'>
			<button onclick='saveCss()'>预览</button>
		</div>
	</div>
</div>
	<div style="float:right;width:73.5%" id='content' align='center'>
		
	</div>
	<div style="float:right;width:73.5%" id='configAttr'>
		<span id='richSpan'>
			<div class='my_title'>配置</div>
			<div class='config_rich'>
				<textarea resizable='true' rows="2" name='richText'></textarea>
			</div>
		</span>
		<span id='normalSpan'>
			<div class='my_title'>内容</div>
			<div class='config_con'></div>
		</span>
	</div>
</div>
<script>
	var content=$("#content");
	var attr=$("#configAttr");
	var attr_con=attr.find("div.config_con");
	var count=1;
	var map={};
	var curCfg;
	var curItem;
	var mopInput=$("input.mod");
	var editor;
	mopInput.bind("keyup",function(){
		if(!curItem||!curItem.length)
			return;
		curItem.css($(this).attr("name"),this.value);
	});
	var templates={
		one:{
			str:"<div class='imgAndWord mapItem'>"+
					"<div class='title'><span tool='text' class='titleText'>标题</span></div>"+
					"<div class='content'>"+
						"<div tool='imgDiv'><img>图片</img></div>"+
						"<div tool='wordDiv' class='wordDiv'>文字</div>"+
					"</div>"+
				"</div>"
		}
	}
	var toolTemplates={
		text:{
			str:"<input></input>",
			getValue:function(){
				return attr_con.children("input").val();
			},
			setValue:function(){
				attr_con.children("input").val(this.text());
			},
			finish:function(){
				this.text(toolTemplates.text.getValue());
			}
		},
		wordDiv:{
			str:"<textarea></textarea>",
			css:true,
			getValue:function(){
				return attr_con.children("textarea").val();
			},
			setValue:function(){
				attr_con.children("textarea").val(this.html().replace(/<br>/g,"\n"));
			},
			finish:function(){
				this.html(toolTemplates.wordDiv.getValue().replace(/\n/g,"<br>"));
			}
		},
		imgDiv:{
			css:true,
			str:"<span>"+
				"<div class='normal_fileUpload' mes='图片格式:jpg,png,gif,bmp' ><button class='file_control' type='button'>选择文件</button>"+
				"<input  class='file_input' disabled=true />"+
				"<button class='file_submit' type='button'>上传</button>"+
				"<div><img class='ImgFileDesc' width='100px' height='100px' src='/web/resource/wh.jpg'></img></div>"+
				"</div></span>",
			getValue:function(){
				return $("<img width='100%' height='100%' src='"+attr_con.find("img.ImgFileDesc").attr("src")+"' />");
			},
			setValue:function(){
				
			},
			finish:function(){
				this.empty();
				this.append(toolTemplates.imgDiv.getValue());
			}
		}
	}
	function createImg(file,data){
		var temp=$("<div>").html(data).text();
		var res=JSON.parse(temp);
		this._src.opt.bind.fileDesc.val("");
		this._src.opt.bind.imgDesc.attr("src",res.message);
	}
	function addBtn1(){
		var item=$(templates.one.str).appendTo(content);
		item.bind("click",showTool);
		item.attr("mapItem",count);
		curItem=item;
		map["map_"+count++]={
			elem:item,
			key:'one'
		};
		mopInput.each(initMop)
	}
	function initMop(){
		this.value=curItem[this.name]();
	}
	function showTool(e){
		curItem=$(this);
		mopInput.each(initMop);
		var src=$(e.srcElement);
		var tool=src.attr("tool");
		if(!tool)
			return;
			
		var temp=toolTemplates[tool];
		attr_con.html(temp.str);
		temp.setValue.call(src);
		curCfg={
			src:src,
			tool:temp	
		}
		//��ʼ��ģ�� 
		$normalFileUp=attr_con.find(".normal_fileUpload")
		if($normalFileUp.length){
			$normalFileUp.each(function(){
				var t=$(this);
				t.fileUpLoad({
					 bind:{
					 	chooseFile:t.find(".file_control"),
					 	fileDesc:t.find(".file_input"),
					 	submit:t.find(".file_submit"),
					 	imgDesc:t.find(".ImgFileDesc"),
					 	filePath:t.find(".file_value")
					 },
					 fileType:".txt",
					 autoSubmit:false,
					 zIndex:9000,
					 errorMes:t.attr("mes"),
					 doComplete:createImg
				});	
			})
		}
		//��ʼ����ʽ
	}
	function saveCfg(){
		curCfg.tool.finish.call(curCfg.src);
	}
	function delItem(){
		curItem.remove();
		delete map["map_"+curItem.remove("mapItem")]
	}
	function saveCss(){
		if(curCfg.tool.css){
			var ret=simpleText.createHtml(curCfg.tool.getValue(),$("div.config_css"));
			curCfg.src.empty();
			curCfg.src.append(ret);
		}
	}
	$(document).bind("keyup",function(e){
		alert(e.keyCode);
	});
	$(document).ready(function(){
		simpleText.init($("div.config_css"));
		/*
		editor = KindEditor.create('textarea[name="richText"]', {
				resizeType : 1,
				allowPreviewEmoticons : true,
				allowImageUpload : false,
				items : [ 'formatblock', 'fontname', 'fontsize', 
				          '|', 'forecolor', 'hilitecolor',
						'bold', 'italic', 'underline', 'strikethrough', 'lineheight', 'removeformat', '|',
						'justifyleft', 'justifycenter', 'justifyright',
						'insertorderedlist', 'insertunorderedlist', 'indent', 'outdent', 'subscript', 'superscript', '|',
						'undo', 'redo','|',  'cut', 'copy', 'paste', 'plainpaste', 'wordpaste', '|', 
						'emoticons', 'image', 'flash', 'media', 'insertfile', 'table', 'hr', 'link', 'unlink']
		});*/
	});
</script>
{% endblock %}
			